<template>
    <div>
        <el-container>
            <el-header>

                <div style="margin-top: 10px;">
                    <el-row :gutter="10">
                        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="6">
                            <div class="grid-content bg-purple">
                            </div>
                        </el-col>
                        <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="12">
                            <div class="grid-content bg-purple-content">

                                <ul>
                                    <li @click="toHome">首页</li>
                                    <!--                                    <li>酒店推荐</li>-->
                                    <!--                                    <li>旅游攻略</li>-->
                                    <!--                                    <li>热门景点</li>-->
                                </ul>

                                <div style="width: 350px;float: left;line-height: 36px;margin-left: 10px">
                                    <el-input placeholder="请输入搜索内容" style="border: 2px solid #00d0d4;border-radius: 5px"
                                              v-model="searchContent" @keyup.enter.native="search" autocomplete="on"
                                              class="input-with-select">
                                    </el-input>

                                </div>
                                <button @click="search"
                                        style="float: left;height: 43px;width: 68px;background-color: #00d0d4;border: none;
                                        border-bottom-right-radius: 5px;border-top-right-radius: 5px;outline: none">
                                    搜索
                                </button>
                            </div>
                        </el-col>
                        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="6">
                            <div class="grid-content bg-purple-light" align="center" style="line-height: 30px"
                                 v-if="nickname ===''">
                                <span>请</span>

                                <span style="cursor: pointer;color: #00bcd4"
                                      @click="toLogin"> 登录  </span>
                                <span>或免费</span>
                                <span style="cursor: pointer;color: #00bcd4"
                                      @click="toRegister"> 注册  </span>

                            </div>
                            <div class="grid-content bg-purple-light" align="center" style="line-height: 30px"
                                 v-if="nickname !==''">
                                <span>欢迎回来</span>
                                <span style="color: #00bcd4;line-height: 30px"> {{nickname}}</span>
                                <span style="color: red;cursor: pointer" @click="logout">  退出登录</span>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div style="border-bottom-style: inset;margin-top: 8px"></div>
            </el-header>
            <el-main>

                <div style="width: 100%;margin-top: 30px;background-color: #f4f4f4">
                    <el-carousel :interval="4000" type="card" height="400px" indicator-position="none">
                        <el-carousel-item v-for="item in imgs" v-bind:key="item.url">
                            <img :src="item.url"/>
                        </el-carousel-item>
                    </el-carousel>


                </div>
                <div style="font-size: 30px;color: red;font-weight: bold;margin-top: 20px" align="center">酒店详情</div>

            </el-main>
            <div id="content3" style="width: 60%;margin: 10px auto;margin-top: 20px">

                <ul>
                    <li v-for="(item,index) in tableData2"
                        :key="index" style="margin-left: 50px;position: relative">

                        <img style="margin-top: 10px" :src="item.imgUrl" alt="">
                        <span style="width: 450px;overflow: hidden;text-overflow:ellipsis;
                        white-space:nowrap;margin-left: 20px;font-size: 30px;margin-top: 30px">
                            {{item.name}}

                        </span>
                        <span>位置信息:{{item.locationInfo}}</span>

                        <div>
                            <span style="font-size: 20px;margin-top: 10px">设计风格:{{item.designStyles}}</span>
                            <span style="font-size: 35px;font-weight: bold;color: #ff3939;line-height: 56px;
                            position: absolute;margin-left: 300px">￥{{item.price}} <span
                                    style="color: #ff3939;font-size: 15px"> 起</span> </span>
                            <button style="float: right;width: 160px;height: 56px;
                            background-color: #ff3939;color: #fff;font-size: 20px;
                            border: none;outline: none;border-radius: 4px;">
                                <span @click="orderHotel">立即抢购</span>
                            </button>
                        </div>

                    </li>
                </ul>


            </div>
            <el-footer>

                <div style="height: 60px">
                    <el-row :gutter="10">
                        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="6">
                            <div class="grid-content footer-content" style="height: 100px">
                                <div style="float: right;margin-right: 5px">
                                    <div style="margin-right: 5px;font-size: 18px;cursor: pointer">
                                        xxx旅游有限公司
                                    </div>
                                    <div style="font-size: 10px;margin-top: -20px">经营许可：L-HUN-100213</div>
                                </div>

                            </div>
                        </el-col>
                        <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="12">
                            <div class="grid-content ">
                                <div style="height: 100px" class="footer-content">
                                    <ul>
                                        <li>安心服务</li>
                                        <li>放心价格</li>
                                        <li>退改无忧</li>
                                    </ul>
                                </div>

                            </div>
                        </el-col>
                        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="6">
                            <div class="grid-content footer-content">
                                <div style="height: 100px;line-height: 100px;color: white;font-size: 18px;cursor: pointer">
                <span>
                  <img src="../../assets/img/customer.png" style="width: 35px;height: 35px;margin-top: 30px" alt="">
                </span>
                                    联系客服
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-footer>
        </el-container>

        <el-dialog
                title="立即抢购"
                :visible.sync="open"
                width="30%"
                center>
            <el-form ref="form" :model="form" label-width="80px">

                <el-form-item label="酒店价格">
                    <el-select v-model="form.price" placeholder="请选择价格">
                        <el-option label="139" value="139"></el-option>
                        <el-option label="239" value="239"></el-option>
                        <el-option label="539" value="539"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="酒店类型">
                    <el-select v-model="form.type" placeholder="请选择类型">
                        <el-option label="标间" value="1"></el-option>
                        <el-option label="套房" value="2"></el-option>
                        <el-option label="双人床" value="3"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submit">立即创建</el-button>
                    <el-button @click="open=false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    import moment from 'moment'
    import {travel_strategy} from "../../api/travel_strategy";
    import {travel_route} from "../../api/travel_route";
    import {travel_hotel, hotel_detail, travel_hotel_create_order} from "../../api/travel_hotel";

    export default {
        data() {
            return {
                tableData: [],
                tableData1: [],
                tableData2: [],
                currentPage: 1,
                searchContent: "",
                searchCityName: "",
                hotelId: this.$route.query.hotelId,
                pageSize: 5,
                pageSize1: 6,
                form: {},
                total: 0,
                total1: 0,
                open: false,
                total2: 0,
                nickname: "",
                loading: false,
                imgs: [
                    {url: require('../../assets/img/banner-01.jpg')},
                    {url: require('../../assets/img/banner-02.jpg')},
                    {url: require('../../assets/img/banner-03.jpg')},
                ],

            };
        },

        created() {
            //this.getTravelStrategy();
            this.getUsername();
            this.hotelDetail();
            // this.getTravelRoute();
            // this.getHotel();
        },

        filters: {
            filterCtime(ctime) {
                // 过滤时间
                if (ctime) {
                    return moment(ctime).format("YYYY-MM-DD HH:mm:ss");
                } else {
                    return '暂无数据'
                }
            },
            filterShow(show) {
                if (show === 1) {
                    return '显示'
                } else {
                    return '不显示'
                }
            }
        },

        methods: {

            search() {
                this.loading = true;
                this.getTravelStrategy();
            },

            submit() {
                this.orderHotel();
                this.open = false;
                this.createOrder();
                this.$message.success("下单成功")
            },
            toHome() {
                this.$router.push('/index').catch(() => {
                });
            },

            createOrder() {
                var list = localStorage.getItem('userInfo');
                var lists = JSON.parse(list);
                if (lists === null) {
                    this.$message.error("还未登录不能下单哦")
                } else {
                    let params = {};
                    params.userId = lists.userId;
                    params.hotelId = this.hotelId;
                    travel_hotel_create_order(params).then(res => {
                        if (res.status === 200) {
                            this.$message.success("抢购成功")
                        }
                    })
                }

            },
            orderHotel() {
                //this.$message.success("抢购成功");
                this.open = true;
            },

            hotelDetail() {
                let params = {};
                params.id = this.hotelId;
                hotel_detail(params).then(res => {
                    if (res.status === 200) {
                        this.tableData2.push(res.data)
                    }
                })
            },

            /**
             * 改变每页大小
             */
            handleSizeChange(e) {
                this.pageSize = e;
                this.getTravelStrategy();
            },

            searchCity() {
                this.getHotel();
            },

            handleSizeChange1(e) {
                this.pageSize1 = e;
                this.getTravelRoute();
            },

            logout() {
                this.$confirm('确定退出吗', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let localStorage = window.localStorage;
                    localStorage.removeItem("userInfo");
                    this.$message.success("退出成功");
                    location.reload();
                })


            },

            exchageCity() {
                let that = this;
                document.getElementById("hotcity").addEventListener("click", function (e) {
                    that.searchContent = e.target.innerText;

                });
                this.getTravelStrategy();
            },

            like() {

            },

            collectRoute() {
            },

            toRegister() {
            },

            getUsername() {
                var list = localStorage.getItem('userInfo');
                var lists = JSON.parse(list);
                if (lists !== null) {
                    this.nickname = lists.nickname;
                }
            },
            /**
             * 改变当前页
             */
            handleCurrentChange(e) {
                this.currentPage = e;
                this.getTravelStrategy();
            },
            handleCurrentChange1(e) {
                this.currentPage = e;
                this.getTravelRoute();
            },

            toLogin() {
                this.$router.push('/login').catch(() => {
                });
            },

            getTravelStrategy() {
                let params = {};
                params.travelTheWay = this.searchContent;
                params.pageSize = this.pageSize;
                params.pageNumber = this.currentPage;
                travel_strategy(params).then(res => {
                    if (res.status === 200) {
                        console.log(res.data);
                        this.total = Number.parseInt(res.data.total);
                        this.tableData = res.data.list;
                        this.loading = false;
                    }

                })
            },

            getTravelRoute() {
                let params = {};
                params.pageSize = this.pageSize1;
                params.pageNumber = this.currentPage;
                travel_route(params).then(res => {
                    if (res.status === 200) {
                        console.log(res.data);
                        this.total1 = Number.parseInt(res.data.total);
                        this.tableData1 = res.data.list;
                        this.loading = false;
                    }

                })
            },
            getHotel() {
                let params = {};
                params.name = this.searchCityName;
                params.pageSize = this.pageSize1;
                params.pageNumber = this.currentPage;
                travel_hotel(params).then(res => {
                    if (res.status === 200) {
                        console.log(res.data);
                        this.total2 = Number.parseInt(res.data.total);
                        this.tableData2 = res.data.list;
                        this.loading = false;
                    }

                })
            }
        }
    };
</script>

<style scoped>

    .content:hover {
        color: #00bcd4;
    }


    .el-header, .el-footer {

        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        background-color: white;
        color: #333;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }


    .el-col {
        border-radius: 4px;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }

    .bg-purple {
        background: white;
    }

    .bg-purple-content {
        background: white;
    }

    .bg-purple-light {
        background: white;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

    .grid-footer {
        background-color: pink;
    }

    ul li {
        float: left;
        margin-left: 20px;
        line-height: 36px;
    }

    li:hover {
        color: #00d0d4;
        cursor: pointer;
    }

    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
        background: url("../../assets/img/banner-01.jpg") no-repeat;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
        background: url("../../assets/img/banner-02.jpg") no-repeat;
    }

    .footer-content {
        background-color: #c4c9cd;
    }

    .footer-content ul li {
        line-height: 100px;
        margin-left: 150px;
        font-size: 30px;
        font-weight: 700;
        color: white;
    }

    .city_recommend ul li:hover {
        background: #00bcd4;
        color: white;
    }

    .recommend_01 {
        width: 390px;
        height: 302px;

        background-size: contain;
        background: url("../../assets/img/beijing.png") no-repeat;
    }

    .recommend_02 {
        width: 390px;
        height: 302px;

        background-size: contain;
        background: url("../../assets/img/shanghai.png") no-repeat;
    }

    .recommend_03 {
        width: 390px;
        height: 302px;
        background-size: contain;
        background: url("../../assets/img/c06304f3eb91aa6bca56c1f88dff7986.jpg") no-repeat;
    }
</style>
